<script setup>
import { ref, defineOptions } from 'vue'
import { goodBook } from '@/api/getAxios'
import axios from 'axios';

//和xxx一样好的书
const goodbook = ref([])
const storyName = ref('')
//访问受限
// goodBook().then((res) => {
//     console.log(res);
//     // newbook.value = res.data.data.list
// }) 




var myHeaders = new Headers();
myHeaders.append("c", "android/model:MuMu,SDK:Android6.0.1(API23)-huoxing/2.7.3/guanwang/000000000000000");
myHeaders.append("x-i", "e7ed69f043e48c5dd069b7a86d291326a183980aa6ec5f0d8f14cdbcc49e9eaa0fbce629f02469e8c9cc4ab7a35d76a4db5f3a818e6c8e86226faa198c7866de81ce843c1216e979ec3268d7d6c6a74a");
myHeaders.append("x-s", "7769edbd0c5df8384849b6c421b2b15a");
myHeaders.append("x-ssid", "");
myHeaders.append("set-cookie", "");
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
myHeaders.append("Accept", "*/*");
myHeaders.append("Host", "api.m.hotread.com");
myHeaders.append("Connection", "keep-alive");

var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
};

fetch("/m1/story/recentReadRecommend?channel=1", requestOptions)
    .then(response => response.text())
    .then(result => {
        // console.log(JSON.parse(result))
        goodbook.value = JSON.parse(result).data.list
        storyName.value = JSON.parse(result).data.storyName
    })
    .catch(error => console.log('error', error));

</script>
<template>
    <div class="good-book">
        <h1 class="recommend">
            <span>和《{{ storyName }}》一样的好书</span>
        </h1>
        <ul>
            <li v-for="item in goodbook" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.cover" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{ item.storyName }}</p>
                    <p class="detail">{{ item.introduce }}</p>
                    <p class="type">
                        <span class="author-type">{{ item.author }} | {{ item.type }}</span>
                        <span class="fireValue">{{ (item.fireValue / 100000000).toFixed(1) + '亿人气值' }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.good-book {
    height: 168vw;
    background-color: #fff;
    margin-bottom: 15px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;

        span {
            padding: 0 30px;
        }
    }

    ul {
        display: flex;
        flex-direction: column;

        li {
            padding: 10px;
            height: 40vw;
            display: flex;

            .coverImg {

                border-radius: 10px;
                width: 30vw;
                height: 40vw;

                img {
                    border-radius: 10px;
                    box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

                    width: 100%;
                    height: 100%;
                }
            }

            .msg {
                text-align: left;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 68vw;
                margin-left: 10px;

                .name {
                    font-size: 18px;

                }

                .detail {
                    display: -webkit-box;
                    text-align: center;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #939296;
                    font-size: 14px;
                    text-align: left;
                }

                .type {

                    color: #939296;
                    font-size: 12px;

                    .fireValue {
                        margin-left: 20px;
                        color: #ccae59;
                    }
                }


            }

        }
    }
}
</style>